<template>
    <footer class="footer">
        <span class="todo-count"><strong>{{ todos.leftCount }}</strong> item left</span>
        <ul class="filters">
            <li v-for="item in todos.filters" :key="item" @click="todos.changeActive(item)">
                <a :class="{ selected: item === todos.active }" href="#/">{{ item }}</a>
            </li>
        </ul>
        <button class="clear-completed" @click="todos.clearCompleted">清除已完成的事</button>
    </footer>
</template>

<script setup>
import useStore from '../store/index.js'
const { todos } = useStore()

</script>
<style>
@import url('../style/base.css');
</style>